/**
 * 派车单模块 - 添加和编辑弹窗
 * @author xiaoxujs
 */

import { Col, Form, Input, InputNumber, message, Modal, Row, Select } from "antd";
import { FC, useEffect, useState } from "react";
import { IPcdZyVehicleInfoAddParams, IPcdZyVehicleInfoSelect } from "../../../../../type/paichedan";
import { plateColorArrSelect, pypeOfVehicleDispatch, vehicleType } from "../../../../../assets/data";
import { handleGetDictionaryItem } from "../../../../../assets/fun/DictionaryItem";
import { postPcdZyVehicleInfoAdd, putPcdZyVehicleInfoEdit } from "../../../api";
import { useWindowFontSize } from "../../../../../assets/fun/Antd/configprovider";

const AddAndChangeModule: FC<{
    open: boolean,
    handleAddAndChangeModuleCallback: () => void;
    clickData?: IPcdZyVehicleInfoSelect;
}> = ({
    open,
    handleAddAndChangeModuleCallback,
    clickData
}) => {
        const [form] = Form.useForm<IPcdZyVehicleInfoAddParams>();
        const { validateFields, resetFields, setFieldsValue } = form;
        const [confirmLoading, setConfirmLoading] = useState(false);
        useEffect(() => {
            if (clickData) {
                setFieldsValue(clickData)
            }
        }, [clickData, setFieldsValue])

        const handleOk = async () => {
            let values = await validateFields();
            setConfirmLoading(true)
            if (clickData) {
                const { code, msg } = await putPcdZyVehicleInfoEdit({ ...values, id: clickData.id }) as { code: number; msg: string };
                if (code === 20000) {
                    message.success('编辑成功')
                    handleCancel()
                } else {
                    message.error(msg);
                }
            } else {
                const { code, msg } = await postPcdZyVehicleInfoAdd(values) as { code: number; msg: string };
                if (code === 20000) {
                    message.success('添加成功')
                    handleCancel()
                } else {
                    message.error(msg);
                }
            }
            setConfirmLoading(false)


        };

        const handleCancel = () => {
            setConfirmLoading(false)
            resetFields()
            handleAddAndChangeModuleCallback()
        };
        return <Modal
            width={useWindowFontSize(880)}
            title={clickData ? '编辑车辆' : '添加车辆'}
            open={open}
            onOk={handleOk}
            onCancel={handleCancel}
            confirmLoading={confirmLoading}
        >
            <Form
                name="basic"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 16 }}
                form={form}
            >
                <Row>
                    <Col span={12}>
                        <Form.Item<IPcdZyVehicleInfoAddParams>
                            label="车牌号"
                            name="plateNumber"
                            rules={[
                                { required: true, message: '请填写车牌号' },
                                { pattern: /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z][A-HJ-NP-Z0-9]{4,5}[A-HJ-NP-Z0-9挂学警港澳]$/, message: '请输入正确车牌号' },
                            ]}
                        >
                            <Input style={{ width: '27.3rem' }} addonBefore={<Form.Item
                                name='plateColor'
                                noStyle
                                rules={[{ required: true, message: '请选择车牌颜色' }]}
                            >
                                <Select style={{ width: '7rem' }} options={plateColorArrSelect} />

                            </Form.Item>} placeholder="请填写车牌号" />
                        </Form.Item>
                        <Form.Item<IPcdZyVehicleInfoAddParams>
                            label="车斗长(mm)"
                            name="carDollyLength"
                            rules={[
                                { required: true, message: '请输入车斗长!' },
                                { pattern: /^(\d{1,4}|10000)$/, message: '当前范围0~10000' }
                            ]}
                        >
                            <InputNumber placeholder="请输入车斗长" style={{ width: '27.3rem' }} />
                        </Form.Item>
                        <Form.Item<IPcdZyVehicleInfoAddParams>
                            label="车斗宽(mm)"
                            name="carDollyWidth"
                            rules={[
                                { required: true, message: '请输入车斗宽!' },
                                { pattern: /^(\d{1,4}|10000)$/, message: '当前范围0~10000' }
                            ]}
                        >
                            <InputNumber placeholder="请输入车斗宽" style={{ width: '27.3rem' }} />
                        </Form.Item>
                        <Form.Item<IPcdZyVehicleInfoAddParams>
                            label="车斗高(mm)"
                            name="carDollyHeight"
                            rules={[
                                { required: true, message: '请输入车斗高!' },
                                { pattern: /^(\d{1,4}|10000)$/, message: '当前范围0~10000' }
                            ]}
                        >
                            <InputNumber placeholder="请输入车斗高" style={{ width: '27.3rem' }} />
                        </Form.Item>
                        <Form.Item<IPcdZyVehicleInfoAddParams>
                            label="派车类型"
                            name="dispatchType"
                            rules={[{ required: true, message: '请选择派车类型!' }]}
                        >
                            <Select placeholder='请选择派车类型' options={handleGetDictionaryItem(pypeOfVehicleDispatch)} style={{ width: '27.3rem' }} />
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item<IPcdZyVehicleInfoAddParams>
                            label="车型"
                            name="carType"
                            rules={[{ required: true, message: '请选择车型!' }]}
                        >
                            <Select placeholder='请选择车型' options={handleGetDictionaryItem(vehicleType)} style={{ width: '27.3rem' }} />
                        </Form.Item>
                        <Form.Item<IPcdZyVehicleInfoAddParams>
                            label="预装量(吨)"
                            name="preloadAmount"
                            rules={[
                                { required: true, message: '请输入预装梁（吨）!' },
                                { pattern: /^(\d{1,4}|10000)$/, message: '当前范围0~10000' }
                            ]}
                        >
                            <InputNumber style={{ width: '27.3rem' }} />
                        </Form.Item>
                        <Form.Item<IPcdZyVehicleInfoAddParams>
                            label="司机姓名"
                            name="driverName"
                            rules={[{ required: true, message: '请输入司机姓名!' }]}
                        >
                            <Input placeholder="请输入司机姓名" style={{ width: '27.3rem' }} />
                        </Form.Item>
                        <Form.Item<IPcdZyVehicleInfoAddParams>
                            label="联系电话"
                            name="contactNumber"
                            rules={[
                                { required: true, message: '请输入联系电话!' },
                                { pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号!" },
                            ]}
                        >
                            <Input placeholder="请输入联系电话" style={{ width: '27.3rem' }} />
                        </Form.Item>

                    </Col>
                </Row>



            </Form>
        </Modal>
    }

export default AddAndChangeModule;